<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">   

        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

        <style>
            html, body, #map-canvas {
                height: 75%;
                width: 85%;
                margin: 0px;
                padding: 0px

            }
            #panel {
                position: absolute;
                top: 5px;
                left: 30%;
                margin-left: -180px;
                z-index: 5;
                background-color: #fff;
                padding: 5px;
                border: 1px solid #999;
            }
        </style>


        <script>
            var geocoder;
            var directionsDisplay;
            var directionsService = new google.maps.DirectionsService();
            var map;
            var haight = new google.maps.LatLng(37.7699298, -122.4469157);
            var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);

            var coOrdinates="";

            var from="";
            var to=""
          
            function initialize() {
                geocoder = new google.maps.Geocoder();
                directionsDisplay = new google.maps.DirectionsRenderer();
                var mapOptions = {
                    zoom: 14,
                    center: haight
                }
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                directionsDisplay.setMap(map);
              
            }

            function callLocal(){
                FromcodeAddress();
                TocodeAddress();
               
            }

            function FromcodeAddress() {
                var address = document.getElementById('from').value;
                geocoder.geocode( { 'address': address}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {                    
                       

                        coOrdinates=results[0].geometry.location;
                        var finalCord=coOrdinates+"";
                        var length=((coOrdinates+"").length)-1;

                        var filter1=finalCord.substring(1, length);
                        var filter2=filter1.split(",");

                        haight = new google.maps.LatLng(filter2[0], filter2[1]);


                  /*      alert("[ "+coOrdinates+" ] [  "+finalCord.substring(1, length)+" ]");
                        alert(filter2[0]);*/
                        
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            }

            function TocodeAddress() {
                var address = document.getElementById('to').value;
                geocoder.geocode( { 'address': address}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {


                       coOrdinates=results[0].geometry.location;
                        var finalCord=coOrdinates+"";
                        var length=((coOrdinates+"").length)-1;

                        var filter1=finalCord.substring(1, length);
                        var filter2=filter1.split(",");

                        oceanBeach = new google.maps.LatLng(filter2[0], filter2[1]);

                        calcRoute();


                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            }

            function calcRoute() {

                var request = {
                    origin: haight,
                    destination: oceanBeach,
                    // Note that Javascript allows us to access the constant
                    // using square brackets and a string value as its
                    // "property."
                    travelMode: google.maps.TravelMode['DRIVING']
                };
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                    }
                });
            }

          
            google.maps.event.addDomListener(window, 'load', initialize);
           

        </script>
    </head>
    <body>
        <div id="panel">
            From:  <input id="from" type="textbox" value="mumbai">
            To:   <input id="to" type="textbox" value="nagpur">
            <input type="button" value="Geocode" onclick="callLocal()">

            <div>Yogesh Paisode:  <button onclick="calcRoute()">Click</button></div>
        </div>

 

        <div id="map-canvas"></div>

    </body>
</html>